let lastDirection = 'right'; // Default direction pet.style.transition = "none"; // Disable transition for return to top-left // Stop if the pet is close enough to the target // Normalize the direction and move towards the target let moveX = deltaX / distance * 5; // Adjust the speed here (higher for faster movement) // Determine direction and set frame based on movement lastDirection = '↘'; // Moving down-right frame = 1; // ↘ frame lastDirection = '↙'; // Moving down-left frame = 3; // ↙ frame lastDirection = '↖'; // Moving up-left frame = 5; // ↖ frame lastDirection = '⬅'; // Moving left frame = 4; // ⬅ frame lastDirection = '⬇'; // Moving down frame = 2; // ⬇ frame lastDirection = '⬆'; // Moving up frame = 6; // ⬆ frame lastDirection = '↗'; // Moving top-right frame = 7; // ↗ frame // Cycle through animation frames for the current direction pet.style.backgroundPosition = `-${frame * 50}px 0`; // Adjust for 50px wide frames requestAnimationFrame(movePetToCursor); // Continue moving // Listen for mouse movement to set the target position width: 50px; /* Each frame is 50px */ height: 50px; /* Each frame is 50px */ background-image: url('spritesheet.png'); /* Path to sprite sheet */ background-size: 400px 50px; /* 8 frames, 50px each */ transition: none; /* Disable transition for smooth movement */